<template>
  <div>
    <el-select
      v-model="value"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search"></el-button>
    <button class="addbtn">添加项目</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [],
    };
  },
  mounted() {
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-button--primary {
  background-color: rgb(252, 133, 192) !important;
  border-color: rgb(252, 133, 192);
  margin: 0 10px;
}
.addbtn {
  height: 40px;
  width: 90px;
  border-radius: 5px;
  background-color: rgb(252, 133, 192);
  border-color: rgb(252, 133, 192);
  color: white;
}
</style>
